<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title th:text="${#servletContext.getAttribute('applicationOptionsMap').websiteTitle} + '&nbsp;|&nbsp;Dashboard'"></title>
	<link rel="shortcut icon" th:href="${#servletContext.getAttribute('applicationOptionsMap').websiteIco}">
	<link rel="apple-touch-icon" th:href="${#servletContext.getAttribute('applicationOptionsMap').websiteIco}">
	<!-- Tell the browser to be responsive to screen width -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Theme style -->
	<link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
	<!-- Font Awesome -->
	<link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">

	<link rel="stylesheet" th:href="@{/plugins/chartjs/css/Chart.min.css}">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
	<!-- Navbar -->
	<nav class="main-header navbar navbar-expand navbar-white navbar-light">
		<!-- Left navbar links -->
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
			</li>
		</ul>

		<!-- Right navbar links -->
		<ul class="navbar-nav ml-auto">
			<!-- Messages Dropdown Menu -->
			<li class="nav-item dropdown">
				<a class="nav-link" target="_blank" href="/index">
					<i class="fa fa-paper-plane"></i>
					<span>博客前台首页</span>
				</a>
			</li>
		</ul>
	</nav>
	<!-- /.navbar -->

	<!-- Main Sidebar Container -->
	<aside class="main-sidebar sidebar-dark-primary elevation-4">
		<!-- Brand Logo -->
		<h1>
			<a href="/admin" class="brand-link">
				<img th:src="${#servletContext.getAttribute('applicationOptionsMap').avatar}" class="brand-image img-circle elevation-3">
				<span class="brand-text font-weight-light" th:text="${#servletContext.getAttribute('applicationOptionsMap').websiteTitle}">websiteTitle</span>
			</a>
		</h1>

		<!-- Sidebar -->
		<div class="sidebar">
			<!-- Sidebar Menu -->
			<nav class="mt-2">
				<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
					<!-- Add icons to the links using the .nav-icon class
						 with font-awesome or any other icon font library -->
					<li class="nav-header">仪表盘</li>
					<li class="nav-item">
						<a class="nav-link active">
							<i class="nav-icon fas fa-tachometer-alt"></i>
							<p>仪表盘</p>
						</a>
					</li>
					<li class="nav-header">博客编辑</li>
					<li class="nav-item">
						<a href="/adminEdit" class="nav-link">
							<i class="nav-icon fas fa-edit"></i>
							<p>发布博客</p>
						</a>
					</li>
					<li class="nav-header">管理模块</li>
					<li class="nav-item">
						<a href="/adminBlog" class="nav-link">
							<i class="fa fa-list-alt nav-icon" aria-hidden="true"></i>
							<p>博客管理</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/adminCategory" class="nav-link">
							<i class="fa fa-bookmark nav-icon" aria-hidden="true"></i>
							<p>分类管理</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/adminTag" class="nav-link">
							<i class="fa fa-tags nav-icon" aria-hidden="true"></i>
							<p>标签管理</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/adminComment" class="nav-link">
							<i class="fa fa-comments nav-icon" aria-hidden="true"></i>
							<p>评论管理</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/adminUser" class="nav-link">
							<i class="fa fa-user nav-icon" aria-hidden="true"></i>
							<p>用户管理</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="/adminFile" class="nav-link">
							<i class="fa fa-file-code nav-icon" aria-hidden="true"></i>
							<p>文件管理</p>
						</a>
					</li>
					<li class="nav-header">系统管理</li>
					<li class="nav-item">
						<a href="/adminConfig"
						   class="nav-link">
							<i class="fa fa-wrench nav-icon"></i>
							<p>系统配置</p>
						</a>
					</li>
					<li class="nav-item">
						<a href="logout" class="nav-link">
							<i class="fa fa-sign-out-alt nav-icon"></i>
							<p>安全退出</p>
						</a>
					</li>
				</ul>
			</nav>
			<!-- /.sidebar-menu -->
		</div>
		<!-- /.sidebar -->
	</aside>

	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper mt-3">
		<!-- Main content -->
		<section class="content">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-4 col-6">
						<div class="small-box bg-info">
							<div class="inner">
								<h3>新增博客</h3>
								<p>记心中所想</p>
							</div>
							<div class="icon">
								<i class="fa fa-pen-square"></i>
							</div>
							<a href="/adminEdit" class="small-box-footer">Let's go <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-4 col-6">
						<!-- small box -->
						<div class="small-box bg-success">
							<div class="inner">
								<h3 th:text="${totalContent}">1</h3>
								<p>总文章数</p>
							</div>
							<div class="icon">
								<i class="fa fa-list-alt"></i>
							</div>
							<a href="/adminBlog" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-4 col-6">
						<!-- small box -->
						<div class="small-box bg-warning">
							<div class="inner">
								<h3 th:text="${totalCategory}">1</h3>
								<p>分类数量</p>
							</div>
							<div class="icon">
								<i class="fa fa-bookmark"></i>
							</div>
							<a href="/adminCategory" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-4 col-6">
						<!-- small box -->
						<div class="small-box bg-danger">
							<div class="inner">
								<h3 th:text="${totalTag}">1</h3>
								<p>标签总量</p>
							</div>
							<div class="icon">
								<i class="fa fa-tags"></i>
							</div>
							<a href="/adminTag" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-4 col-6">
						<!-- small box -->
						<div class="small-box bg-primary">
							<div class="inner">
								<h3 th:text="${totalComment}">1</h3>
								<p>收到评论数</p>
							</div>
							<div class="icon">
								<i class="fa fa-comments"></i>
							</div>
							<a href="/adminComment" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
					<div class="col-lg-4 col-6">
						<!-- small box -->
						<div class="small-box bg-dark">
							<div class="inner">
								<h3>系统配置</h3>
								<p>站点描述信息</p>
							</div>
							<div class="icon">
								<i class="fa fa-wrench"></i>
							</div>
							<a href="/adminConfig" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
						</div>
					</div>
					<!-- ./col -->
				</div>
				<div class="row">
					<canvas id="myChart" width="500" style="user-select: none; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
				</div>
				<div class="row">
					<canvas id="myChart2" width="500" style="user-select: none; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;"></canvas>
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</section>
		<!-- /.content -->
	</div>
	<!-- /.content-wrapper -->
	<footer class="main-footer">
		<p class="text-center mb-1">
			Copyright © 2020-2021 | THE HARDER, THE MORE FORTUNATE.
		</p>
	</footer>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<!-- Chartjs -->
<script th:src="@{/plugins/chartjs/js/Chart.min.js}"></script>

<script>
	//站点统计
	$.ajax({
		type: "GET",
		url: "/getTodayYesterdayAccess",
		success: function (res) {
			const data = res;
			if (data.info === "success") {
				//数据调整
				let datasets = [];
				for (let key in data.data) {
					let arr = [];
					let obj = data.data[key];
					for (let key in obj) {
						arr.push(obj[key] * 1);
					}
					datasets.push(arr);
				};
				//初始化
				initStatistics(datasets);

			} else {
				console.log("获取站点统计发生错误", res);
			}
		},
		error: function (err) {
			console.log("获取站点统计发生错误", err);
		}
	});
	//初始化站点统计
	function initStatistics(data) {
		//数据
		let statisticsData = {
			labels: ["浏览量", "独立用户", "主页", "留言", "文章"], //项目数量
			datasets: [  //数据组
				{
					label: "昨天",
					backgroundColor: "#fa5c7c",  //填充色
					data: data[0],
					barPercentage: .8,
					categoryPercentage: .3,
				},
				{
					label: "今天",
					backgroundColor: "#0acf97",  //填充色
					data: data[1],
					barPercentage: .8,
					categoryPercentage: .3,
				}
			]
		};

		//配置
		const options = {
			maintainAspectRatio: false, //不保持比例
			scales: {
				xAxes: [{
					gridLines: {
						display: true,
						drawBorder: true,
						drawOnChartArea: false
					}
				}]
			}
		};

		//渲染

		new Chart($("#myChart").get(0), {
			type: 'bar',
			data: statisticsData,
			options: options
		});

	};

	//前七天每天数据
	$.ajax({
		type: "GET",
		url: "getLastWeekendAccess",
		success: function (res) {
			const data = res;
			if (data.info === "success") {
				//数据调整
				let labels = [];
				let datasets = {
					pv: [],
					uv: []
				};
				data.data.forEach(item => {
					labels.push(item.date.substr(4,2)+'月'+item.date.substr(6,2)+'日');
				});
				data.data.reverse().forEach(item => {
					datasets["pv"].push(item.pv);
					datasets["uv"].push(item.uv);
				});
				//初始化
				initByHour(labels, datasets);

			} else {
				console.log("获取站点数据发生错误", res);
			}
		},
		error: function (err) {
			console.log("获取站点数据发生错误", err);
		}
	});

	//数据初始化
	function initByHour(labe, datas) {
		//数据
		const byHourData = {
			labels: labe,
			datasets: [
				{
					label: "浏览量",
					borderColor: "#fa5c7c",
					backgroundColor: "rgba(0,0,0,0)",
					borderWidth: 2,
					fill: false,
					data: datas.pv
				},
				{
					label: "独立用户",
					borderColor: "#39afd1",
					backgroundColor: "rgba(0,0,0,0)",
					borderWidth: 2,
					fill: false,
					data: datas.uv
				}
			]
		};

		//配置
		const options = {
			maintainAspectRatio: false, //不保持比例
			tooltips: {
				mode: 'index',
				intersect: false,
			},
		};

		//渲染
		new Chart($("#myChart2").get(0), {
			type: 'line',
			data: byHourData,
			options: options
		});

	};
</script>
</body>
</html>
